<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>cookie插件</title>
    <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
    <!-- <script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script> -->
    <script src="cookie.js" type="text/javascript"></script>
    <style type="text/css">
    #divtest {
        width: 282px;
    }

    #divtest .title {
        padding: 8px;
        background-color: Blue;
        color: #fff;
        height: 23px;
        line-height: 23px;
        font-size: 15px;
        font-weight: bold;
    }

    #divtest .content {
        padding: 8px 0px;
        background-color: #fff;
        font-size: 13px;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }
    </style>
</head>

<body>
    <div id="divtest">
        <div class="title">
            <span class="fl">cookie插件</span>
            <span class="fr">
                    <input id="btnSet" type="button" value="设置" />
                </span>
        </div>
        <div class="content">
            <span class="fl">邮箱：</span>
            <br />
            <input id="email" name="email" type="text" />
            <br />
            <input id="chksave" type="checkbox" />是否保存邮箱
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        if ($.cookie('email')) {
            $('#email').val($.cookie('email'));
        }
        
        $("#btnSet").bind("click", function() {
        	console.log("cookie: "+$.cookie('email'))
            if ($("#chksave").is(":checked")) {
                $.cookie('email', $('#email').val(), {
                    path: "/",
                    expires: 7
                })
            } else {
            	console.log(document.cookie)
                $.cookie('email', null, {
                    path: "/"
                })
            }
        });
    });
    </script>
</body>

</html>